<template>
    <div class="upload-container">
        <input type="file" @change="handleFileChange" />
        <button @click="startUpload" :disabled="!file || uploading">
            {{ uploading ? '上传中...' : '开始上传' }}
        </button>
        <button @click="togglePause" v-if="uploading">
            {{ isPaused ? '继续' : '暂停' }}
        </button>
        
        <div class="progress">
            <div class="progress-bar" :style="{ width: progressPercent + '%' }"></div>
        </div>
        <div>进度: {{ progressPercent }}%</div>
        <div v-if="hashProgress > 0">
            文件校验中: {{ hashProgress }}%
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import BigFileUploader from './BigFileUploader'

const file = ref(null)
const uploading = ref(false)
const isPaused = ref(false)
const progressPercent = ref(0)
const hashProgress = ref(0)
// 上传器实例
let uploader = null


const handleFileChange = (e) => {
    file.value = e.target.files[0]
    uploader = new BigFileUploader({
        chunkSize: 3 * 1024 * 1024, // 3MB
        concurrent: 5
    })
    uploader.onProgress(updateProgress)
}
    
const startUpload = async () => {
    if (!file.value) return

    uploading.value = true
    try {
        await uploader.selectFile(file.value)
        await uploader.startUpload()
        ElMessage.success('上传成功!')
    } catch (err) {
        ElMessage.error('上传失败: ' + err.message)
    } finally {
        uploading.value = false
    }
}
    
const togglePause = () => {
    if (isPaused.value) {
    uploader.resume()
    } else {
    uploader.pause()
    }
    isPaused.value = !isPaused.value
}

// 更新进度条
const updateProgress = ({ percent }) => {
    progressPercent.value = percent
}

    
</script>
<style scoped lang='scss'>
    
</style>